<template>
  <div class="content">
    <div class="title">专项练习</div>
    <div class="flex marT20 w-size">
      <div v-for="(item, index) in specialType" :key="index"
        class="flex flex-column flex-align-center special-item cursor_pointer" @click="toMnks(index)">
        <img :src="item.img" alt="" class="pic" />
        <div class="marT10 font25">{{ item.name }}</div>
      </div>
    </div>
    <div class="title marT50">按已做未做</div>
    <div class="marT30 flex flex-align-center w-size">
      <div class="already flex flex-align-center flex-justify-between marR30 cursor_pointer">
        <div class="flex">
          <div class="already-round marR10">1</div>
          <div class="tips">已做题</div>
        </div>
        <div class="flex flex-align-end">
          <div class="num">9</div>
          <el-icon color="#999" :size="25">
            <ArrowRight />
          </el-icon>
        </div>
      </div>
      <div class="already flex flex-align-center flex-justify-between cursor_pointer">
        <div class="flex flex-align-center">
          <div class="already-round marR10">2</div>
          <div class="tips">未做题</div>
        </div>
        <div class="flex flex-align-end">
          <div class="num">1629</div>
          <el-icon color="#999" :size="25">
            <ArrowRight />
          </el-icon>
        </div>
      </div>
    </div>
    <div class="title marT50">按难易程度</div>
    <div class="marT30 flex flex-align-center w-size">
      <div class="already flex flex-align-center flex-justify-between marR30 cursor_pointer"
        v-for="(item, index) in degreeType" :key="index">
        <div class="flex flex-align-center">
          <div class="degree-round marR10">{{ index + 1 }}</div>
          <div class="tips">{{ item.name }}</div>
        </div>
        <div class="flex flex-align-end">
          <div class="num">{{ item.num }}</div>
          <el-icon color="#999" :size="25">
            <ArrowRight />
          </el-icon>
        </div>
      </div>
    </div>
    <div class="title marT50">按知识点类型</div>
    <div class="marT30 flex flex-wrap w-size">
      <div class="already flex flex-align-center flex-justify-between cursor_pointer marR30"
        v-for="(item, index) in knowledgeType" :key="index">
        <div class="flex flex-align-center">
          <div class="knowledge-round marR10">{{ index + 1 }}</div>
          <div class="tips">{{ item.name }}</div>
        </div>
        <div class="flex flex-align-end">
          <div class="num">{{ item.num }}</div>
          <el-icon color="#999" :size="25">
            <ArrowRight />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import xgst from '@/assets/img/gp.png'
import yc from '@/assets/img/yc.png'
import cc from '@/assets/img/cc.png'
import jcst from '@/assets/img/jcst1.png'
import jcst2 from '@/assets/img/jcst2.png'
import jcst3 from '@/assets/img/jcst3.png'
import tbjq from '@/assets/img/tbjq.png'
import dxt from '@/assets/img/dxt.png'
import { ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const specialType = reactive([
  {
    img: xgst,
    name: '新规试题',
  },
  {
    img: yc,
    name: '章节练习',
  },
  {
    img: cc,
    name: '知识点练习',
  },
  {
    img: jcst,
    name: '相似题',
  },
  {
    img: jcst2,
    name: '易错题',
  },
  {
    img: jcst3,
    name: '争议题',
  },
  {
    img: tbjq,
    name: '随机题',
  },
  {
    img: dxt,
    name: '强化题',
  },
])
const degreeType = reactive([
  {
    name: '简单题',
    num: 221,
  },
  {
    name: '容易题',
    num: 445,
  },
  {
    name: '一般题',
    num: 419,
  },
  {
    name: '易错题',
    num: 324,
  },
  {
    name: '困难题',
    num: 206,
  },
])
const knowledgeType = reactive([
  {
    name: '时间题',
    num: 56,
  },
  {
    name: '速度题',
    num: 67,
  },
  {
    name: '距离题',
    num: 25,
  },
  {
    name: '罚款题',
    num: 31,
  },
  {
    name: '扣分题',
    num: 105,
  },
  {
    name: '标志题',
    num: 320,
  },
  {
    name: '标线题',
    num: 127,
  },
  {
    name: '手势题',
    num: 11,
  },
  {
    name: '信号灯',
    num: 61,
  },
  {
    name: '灯光题',
    num: 111,
  },
  {
    name: '仪表灯',
    num: 107,
  },
  {
    name: '装置题',
    num: 87,
  },
])

function toMnks(index: number) {
  if (index === 0) {
    router.push('/realExam/index')
  } else {
    router.push({
      name: 'mnks',
    })
  }
}
</script>
<style scoped lang="scss">
.content {
  padding: 30px;
  background-color: #fff;
  min-height: 100vh;
}

.title {
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 10px;
}

.pic {
  width: 50px;
  height: 50px;
}

.special-item {
  width: 150px;
  margin-right: 50px;
  transition: all 0.3s ease;
  /* 添加过渡效果 */
  border-radius: 8px;
  padding: 20px 0;

  &:hover {
    transform: translateY(-10px);
    /* 上移10像素 */
    box-shadow: 0 10px 20px #eefbf0;
    /* 悬停时更明显的阴影 */
  }
}

.already {
  height: 100px;
  width: 300px;
  padding: 0 10px;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 -4px 8px rgba(0, 0, 0, 0.1),
    -4px 0 8px rgba(0, 0, 0, 0.1),
    4px 0 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-bottom: 35px;
  transition: all 0.3s ease;

  /* 添加过渡效果 */
  &:hover {
    transform: translateY(-10px);
    /* 上移10像素 */
    box-shadow: 0 10px 20px #eefbf0;
    /* 悬停时更明显的阴影 */
  }
}

.already-round,
.degree-round,
.knowledge-round {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 20px;
}

.already-round {
  background-color: #0995ff;
}

.degree-round {
  background-color: #00b365;
}

.knowledge-round {
  background-color: #7f8afd;
}

.tips {
  color: #333;
  font-weight: 700;
  font-size: 25px;
}

.num {
  color: #999;
  font-weight: 500;
  font-size: 25px;
}

.w-size {
  width: 80%;
}

.font25 {
  font-size: 25px;
}
</style>
